Here we're going to create another custom transition: a flipboard transition. Flipboard here means an animation that switches between characters until we end up on a certain word.

As in the last post we create a function, this time flipboard(), which returns an object with duration, delay and easing. This time however we are not returning css but instead using the tick(t) function to use javascript in our function. This is not as performant as doing it in CSS but makes writing fancy non CSS transitions possible.

<script>
	let show = false;
</script>

<div>
	<label>
		<input bind:checked={show} type="checkbox" /> Show
	</label>
</div>

{#if show}
	<div>
		<span class="header">Hello world</span>
	</div>
	<div>
		<span class="text">Custom Transitions!</span>
	</div>
{/if}

<style>
	span {
		font-size: 20px;
	}
	.header {
		color: #ff3e00;
	}
	.text {
		color: #1f5389;
	}
</style>